<template>
  <div class="goods-container">
    <vab-query-form>
      <vab-query-form-right-panel :span="24">
        <el-form
          ref="form"
          :inline="true"
          :model="queryForm"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input v-model="queryForm.title" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              native-type="submit"
              type="primary"
              @click="handleQuery"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in list"
        :key="index"
        :lg="6"
        :md="6"
        :sm="6"
        :xl="6"
        :xs="24"
      >
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="goods-card-body">
            <div class="goods-tag-group">
              <el-tag hit>{{ item.DeviceId }}</el-tag>
            </div>
            <div class="goods-image-group">
              <div class="goods-image">
                <vab-icon v-if="item.icon" :icon="item.icon" />

                <el-image
                  v-if="item.DeviceId != 'qingxi'"
                  :class="{ isSvg: item.svg }"
                  fit="cover"
                  :src="img"
                />
                <!-- <img src="@/assets/2.png" alt="" /> -->
                <el-image
                  v-else
                  :class="{ isSvg: item.svg }"
                  fit="cover"
                  style="width: 150px; height: 150px"
                  :src="img1"
                />
              </div>
            </div>
            <div class="goods-title">{{ item.title }}</div>
            <div class="goods-price">
              <el-tag hit>工序编号:{{ item.OpId }}</el-tag>
            </div>
            <div class="goods-price">
              <el-tag hit type="success">运行:{{ item.DeviceState }}</el-tag>
            </div>
            <!-- <div class="goods-price">
              <el-tag hit type="info">零件：{{ item.OpId }}</el-tag>
            </div> -->
            <div class="goods-price">
              <el-tag hit type="info">零件编号{{ item.PartId }}</el-tag>
            </div>
            <!-- <div class="goods-description">
              {{ item.DeviceState }}
            </div> -->
            <div class="goods-detail" @click="getDetail(item)">
              <el-button type="text">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible1"
      title="随机抽检"
      width="60%"
      :before-close="handleClose1"
    >
      <div>
        <div>设备信息</div>
        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              设备编号
            </template>
            {{ DeviceInfo.DeviceId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              设备名称
            </template>
            {{ DeviceInfo.DeviceName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              设备类型
            </template>
            {{ DeviceInfo.DeviceClassify }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              设备型号
            </template>
            {{ DeviceInfo.DeviceModel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              所属产线
            </template>
            {{ DeviceInfo.AffiliationLine }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              设备IP
            </template>
            {{ DeviceInfo.IP }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <vab-icon icon="time-line" />
              通信协议
            </template>
            {{ DeviceInfo.Protocol }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <vab-icon icon="time-line" />
              设备厂商
            </template>
            {{ DeviceInfo.Factory }}
          </el-descriptions-item>
        </el-descriptions>
        <el-row :gutter="20" style="margin-top: 30px">
          <el-col>
            <div>零件信息</div>
          </el-col>
          <el-col :span="24">
            <el-descriptions direction="vertical" :column="4" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  零件编号
                </template>
                {{ PartInfo.PartId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  产品编号
                </template>
                {{ PartInfo.ProductId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  工序编号
                </template>
                {{ PartInfo.OPId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  订单编号
                </template>
                {{ PartInfo.ProduceOrderId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  工单编号
                </template>
                {{ PartInfo.OrderId }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="confirmBtn" v-if="PartInfo.PartId">
            送检
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible2"
      title="检测设备"
      width="500px"
      :before-close="handleClose2"
    >
      <div class="jiancetop">
        <div
          class="jianceitem"
          @click="checkType = 'ManualCheck'"
          :class="{ active: checkType == 'ManualCheck' }"
        >
          人工检测
        </div>
        <div
          class="jianceitem"
          @click="checkType = 'ThreeAxis'"
          :class="{ active: checkType == 'ThreeAxis' }"
        >
          三坐标检测
        </div>
      </div>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button type="primary" @click="nextStep">下一步</el-button>
          <el-button @click="dialogVisible2 = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible3"
      title=""
      width="500px"
      :before-close="handleClose3"
    >
      <div class="jiancetop">
        <div>选择检测文件：</div>
        <div>
          <el-select v-model="NcId" placeholder="请选择">
            <el-option
              v-for="item in FileList"
              :key="item.NcId"
              :label="item.NcId"
              :value="item.NcId"
            ></el-option>
          </el-select>
        </div>
      </div>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="dialogVisible3 = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import img from './img'
  import img1 from './img1'
  import {
    GetALLMachine,
    GetMachineDetailInfo,
    ChooseCheckTypes,
    GetDetectFile,
    Detection,
  } from '@/api/quality'
  export default {
    name: 'Goods',
    data() {
      return {
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false,
        img,
        img1,
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        value: '',
        options: [
          {
            value: '文件',
            label: '文件',
          },
        ],
        ProductId: '',
        DeviceId: '',
        checkType: '',
        DeviceInfo: {},
        PartInfo: {},

        FileList: [],
        NcId: '',
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      handleClose1() {
        console.log('handleClose1handleClose1handleClose1')
        this.dialogVisible1 = false
      },
      handleClose2() {
        this.dialogVisible2 = false
      },
      handleClose3() {
        this.dialogVisible3 = false
      },
      confirmBtn() {
        this.dialogVisible1 = false
        this.dialogVisible2 = true
      },
      nextStep() {
        ChooseCheckTypes({
          DeviceId: this.DeviceId,
          checkType: this.checkType,
        }).then((res) => {
          this.dialogVisible2 = false
          this.dialogVisible3 = true
          GetDetectFile({
            ProductId: this.ProductId,
            DeviceId: this.DeviceId,
          }).then((res) => {
            console.log('DeviceIdDeviceId', res)
            this.FileList = res.FileList
          })
        })
      },
      getDetail(item) {
        console.log('item', item.DeviceId)

        this.DeviceId = item.DeviceId
        GetMachineDetailInfo({ DeviceId: item.DeviceId }).then((res) => {
          console.log('PartInfoPartInfo', res.PartInfo)
          this.dialogVisible1 = true
          this.DeviceInfo = res.DeviceInfo //设备信息
          this.PartInfo = res.PartInfo //零件信息
          this.ProductId = res.PartInfo.ProductId
        })
      },
      submit() {
        if (this.NcId == '') {
          this.$baseMessage('未选中文件', 'error', 'vab-hey-message-error')
          return false
        }
        console.log('this.PartInfo', this.PartInfo)
        const params = {
          Type: this.checkType,
          PartId: this.PartInfo.PartId,
          NcId: this.NcId,
          OPId: this.PartInfo.OPId,
        }
        Detection(params).then((res) => {
          this.$baseMessage('提交成功', 'success', 'vab-hey-message-success')
          this.dialogVisible3 = false
        })
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const params = {
          Index: this.getPage(this.queryForm.pageNo, this.queryForm.pageSize),
          Count: this.queryForm.pageSize,
          MatchString: this.queryForm.MatchString,
        }
        GetALLMachine(params).then((res) => {
          this.list = res.DeviceSimpleInfo
          // this.total = res.TotalCount
          this.listLoading = false
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .goods-container {
    .goods-card-body {
      position: relative;
      padding: $base-padding;
      cursor: pointer;

      .goods-tag-group {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
        padding: $base-padding * 1.5;
      }

      .goods-image-group {
        height: 200px;
        overflow: hidden;
        // background: linear-gradient(to right, #0f2027, #203a43, #2c5364);

        .goods-image {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 200px;

          .isSvg {
            padding: 100px;
          }

          i {
            font-size: 100px;
            color: $base-color-white;
          }

          transition: all ease-in-out 0.3s;

          &:hover {
            transform: scale(1.1);
          }
        }
      }

      .goods-title {
        margin: $base-margin 0 8px 0;
        overflow: hidden;
        font-size: 16px;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .goods-price {
        margin: 10px 0 0;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;

        s {
          color: #c5c8ce;
        }
      }

      .goods-description {
        display: -webkit-box;
        height: 45px;
        margin-top: $base-margin - 5px;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        color: #767676;
        text-overflow: ellipsis;
        box-orient: vertical;
        line-clamp: 2;
      }

      .goods-detail {
        float: right;
        margin-bottom: $base-margin - 9px;
      }
    }
  }
  .jiancetop {
    display: flex;
    align-items: center;
  }

  .jianceitem.active {
    border-color: aqua;
    color: aqua;
  }

  .jianceitem {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #999;
    margin-right: 10px;
  }
</style>
